<template>
  <div>
    <div class="title-css" style="text-align: center;padding: 20px 0;">
      快递总部端 - 快递路线设置
    </div>

    <div>
      <el-form :model="form" label-width="160px">
        <el-form-item>
          <el-input style="width:500px; margin-right: 30px;" v-model="form.id" placeholder="请输入订单号"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input style="width:500px; margin-right: 30px;" v-model="form.address" placeholder="请输入站点地址"
                    autocomplete="off"></el-input>
        </el-form-item>

        <div v-for="(ddd,index) in counter">
          <el-form-item>
            <el-input style="width:500px" v-model="ddd.address" placeholder="请输入站点地址" autocomplete="off"></el-input>

          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="primary" @click="addinput">新增站点信息</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="uploadSites">上传站点信息</el-button>
        </el-form-item>

      </el-form>

    </div>
    <div style="margin-left: 150px;">
      快递路线设置结果: {{ result }}
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: '',
        address: '',
      },
      counter: [],
      numOfSite: 0,   // 站点数目
      result: '',     // 请求结果
    };
  },

  methods: {

    // 添加站点信息输入框
    addinput() {
      this.counter.push({'address': ''})
    },

    // 上传站点信息
    uploadSites() {
      // 输出站点信息
      console.log(this.form.address)
      for (let i = 0; i < this.counter.length; i++) {
        console.log(this.counter[i].address)
      }

      if (this.form.id === '' && this.form.address === '') {
        this.result = "请输入订单号和地址!";
      } else if (this.form.id === '') {
        this.result = "请输入订单号!";
      } else if (this.form.address === '') {
        this.result = "请输入地址!";
      } else {
        // 站点信息数目
        this.numOfSite = 1 + this.counter.length;

        // 为后端拼接数据
        let dtoBody = {
          "nums": this.numOfSite,
          "BaseKey": this.form.id,
          "BaseValue": [],
        }
        dtoBody.BaseValue.push({"Node": this.form.address, "NextAdr": this.counter[0].address})
        for (let i = 0; i < this.counter.length - 1; i++) {
          dtoBody.BaseValue.push({"Node": this.counter[i].address, "NextAdr": this.counter[i + 1].address})
        }

        console.log("要向后端发送的数据: ", dtoBody)

        this.$axios.post("/express/uploadroute", dtoBody).then((res) => {
          console.log(res);

          // 将创建结果绑定到页面中
          this.result = res.data.data;

        }).catch((error) => {
          this.result = "订单号错误, 请重新输入!";
          console.log(error);
          return false;
        });
      }

    },
  },

}
</script>

<style>

</style>